<template>
  <div>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form ref="menuForm" :model="formData" label-width="80px">
        <el-form-item label="上级菜单">
          <treeselect v-model="formData.menuParentId" :options="menuList" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="formData.menuName" />
        </el-form-item>
        <el-form-item label="Url">
          <el-input v-model="formData.menuUrl" />
        </el-form-item>
        <el-form-item label="页面路径">
          <el-input v-model="formData.menuPath" />
        </el-form-item>
        <el-form-item label="权限">
          <el-input v-model="formData.menuAuth" />
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="formData.menuType">
            <el-radio :label="0">目录</el-radio>
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">隐藏菜单</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="formData.menuIcon" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="formData.menuOrder" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveFormData">保存</el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { saveMenu } from '@/api/sys/menu'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  data() {
    return {
      menuList: [],
      dialogFormVisible: false,
      formData: {
        menuId: 0,
        menuParentId: 0,
        menuName: '',
        menuUrl: '',
        menuPath: '',
        menuType: '',
        menuAuth: '',
        menuOrder: '',
        menuIcon: ''
      }
    }
  },
  methods: {
    saveFormData() {
      this.formData.children = []
      saveMenu(this.formData).then(response => {
        this.dialogFormVisible = false
        this.$emit('fetchData')
      })
    },
    getMenuDataInfo(menuData) {
      const menuList = []
      for (const menu of menuData) {
        const menuNode = {
          id: menu.menuId,
          label: menu.menuName
        }
        if (menu.children && menu.children.length > 0) {
          menuNode.children = this.getMenuDataInfo(menu.children)
        } else {
          // menuNode.children = []
        }
        menuList.push(menuNode)
      }
      return menuList
    },
    getMenuTreeList(menuData) {
      this.menuList = this.getMenuDataInfo(menuData)
      this.menuList.unshift({
        id: 0,
        label: '顶级菜单栏'
      })
    }
  }
}
</script>
